<template>
  <div>
      <router-link tag="div" :to="'/index/billmsg/'+type">
      <div class="bill-containe">
          <!-- 左侧图片 -->
         
              <div class="left">
              <img :src="billboard.pic_s640" alt="">
          </div>
          <!-- 右侧列表 -->
          <ul class="right">
              <li v-for="(item,index) in songList" :key="item.song_id">
                  <span :style="{color:index===0?'red':index===1?'blue':'pink'}">{{index+1}}</span>.{{item.title}}
              </li>
          </ul>
        
      </div>
       </router-link>
  </div>
</template>

<script>
import {getBillList} from "@/api/baidu-music"
export default {
    props:{
        type:[String,Number]
    },
    data(){
        return{
            billboard:{},
            songList:[]
        }
    },
    created(){
        getBillList(this.type,3).then(res=>{
           console.log(res.data); 
           this.billboard=res.data.billboard;
           this.songList=res.data.song_list
        })
        
    }
}
</script>

<style lang="less" scoped>

.bill-containe{
    display: flex;
    padding: 10px;
    .left{
        width: 120px;
        flex-shrink: 0;
        img{
            width: 100%;
        }
    }
    .right{
        flex-grow: 1;
         padding:  3px 10px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
    }
}
</style>